<style>
    #modal{
        font-family: "微软雅黑";
        position: fixed;
        left: 0;
        top: 0;
        height: 11.378rem;
        width: 6.4rem;
        background-color: rgba(10,10,10,.4);
        display: none;
    }
    #modal .box{
        width: 6.4rem;
        height: 50%;
        background-color: #fefefe;
        position: absolute;
        bottom: 0;
        left: 0;
        color: #333;
        z-index: 1;
    }

    #modal .share{
         height: 40%;
         margin-top: 10%;
         box-sizing: border-box;
    }
    /*分享*/
    #modal .bdsharebuttonbox a { width: .66rem!important; height: .66rem!important; margin: 0 auto .2rem!important; float: none!important; padding: 0!important; display: block; }
    #modal .bdsharebuttonbox a img { width: .66rem; height: .66rem; }
    #modal .bdsharebuttonbox .bds_tsina { background: url(images/img/sina.png) no-repeat center center/.66rem .66rem; }
    #modal .bdsharebuttonbox .bds_qzone { background: url(images/img/qzone.png) no-repeat center center/.66rem .66rem; }
    #modal .bdsharebuttonbox .bds_tqq { background: url(images/img/tqq.png) no-repeat center center/.66rem .66rem; }
    #modal .bdsharebuttonbox .bds_weixin { background: url(images/img/wechat.png) no-repeat center center/.66rem .66rem; }
    #modal .bdsharebuttonbox .bds_sqq { background: url(images/img/qq.png) no-repeat center center/.66rem .66rem; }
    #modal .gb_resLay li,#modal li a{
        width: 1.2rem;
        text-align: center;
        float: left;
        font-size: .14rem;
        list-style: none;
    }
    #modal .gb_resLay ul{
        padding-left: 0;
    }

    #modal .share_title{
        border-bottom: 1px solid #eeeeee;
    }
    #modal .close{
        width: 100%;
        display: inline-block;
        position: absolute;
        bottom: 0;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        border-top: 1px solid #eeeeee;
        box-sizing: border-box;
        z-index: 9;
    }
</style>
<div class="ui-menu-header">

    <div class="header_btn_left"></div>
    <h1 class="header_title"></h1>
    <div class="header_btn_right"></div>


    <div id="modal">
        <div class="box">
            <div class="share_title">
                <div class="ico">
                    <img src="" alt="">
                </div>
                <div class="title">
                    <h2>分享到状态</h2>
                    <p>你的好友会在动态看到这条分享</p>
                </div>
            </div>
            <div class="share">
              <!--分享模块-->
                <div class="gb_resLay">
                    <div class="bdsharebuttonbox">
                        <ul class="gb_resItms">
                            <li> <a title="分享到微信" href="javascript:void (0)" class="bds_weixin" data-cmd="weixin" ></a>微信好友 </li>
                            <li> <a title="分享到QQ好友" href="javascript:void (0)" class="bds_sqq" data-cmd="sqq" ></a>QQ好友 </li>
                            <li> <a title="分享到QQ空间" href="javascript:void (0)" class="bds_qzone" data-cmd="qzone" ></a>QQ空间 </li>
                            <li> <a title="分享到腾讯微博" href="javascript:void (0)" class="bds_tqq" data-cmd="tqq" ></a>腾讯微博 </li>
                            <li> <a title="分享到新浪微博" href="javascript:void (0)" class="bds_tsina" data-cmd="tsina" ></a>新浪微博 </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div>
                <a class="close">取消</a>
            </div>
        </div>
    </div>
</div>
